
<template>
  <div class="login-box fill" :class="{active:appear}">
    <div class="window hvc flex">
      <div class="pic">
        <img src="img/common/login.jpg" class="obj-c">
        <div class="txt hc">
          <p>登录可享会员特惠价</p>
          <p class="flex flex-justify-content flex-align-items">
            <i></i>
            <span>新朋友享专属特惠</span>
            <i></i>
          </p>
        </div>
      </div>
      <div class="rht">
        <p class="close cursor" @click="hdlShow">×</p>
        <div class="way flex flex-between">
          <p v-for="item in logOpt" class="cursor" 
          @click="hdlWay(item.val)"
          :class="{active:formType == item.val}">{{item.name}}</p>
        </div>
        <div class="form">
          <template v-if="formType == 'code'">
            <div class="inp" 
            :class="[{focus:phoneFocus},{inputted:form.phone.length},{active:phoneRight}]">
              <input placeholder="请输入手机号" v-model="form.phone" type="tel" @focus="hdlFocus('phone')">
              <p class="close cursor vc" @click="hdlClear('phone')">×</p>
            </div>
            <div class="inp code flex flex-align-items" 
            :class="[{focus:codeFocus},{inputted:form.code.length},{active:codeRight},{noTouch:!phoneRight}]">
              <input placeholder="请输入验证码" v-model="form.code" type="text" @focus="hdlFocus('code')">
              <p class="close cursor vc" @click="hdlClear('code')">×</p>
              <p class="btn vc cursor">获取验证码</p>
            </div>
          </template>
          <template v-else-if="formType == 'password'">
            <div class="inp" 
            :class="[{focus:userNameFocus},{inputted:form.userName.length},{active:userNameRight}]">
              <input placeholder="请输入账号" v-model="form.userName" type="tel" @focus="hdlFocus('userName')">
              <p class="close cursor vc" @click="hdlClear('userName')">×</p>
            </div>
            <div class="inp password flex flex-align-items" 
            :class="[{focus:passwordFocus},{inputted:form.password.length},{active:passwordRight}]">
              <input placeholder="请输入密码" v-model="form.password" :type="see?'text':'password'" @focus="hdlFocus('password')">
              <p class="close cursor vc" @click="hdlClear('password')">×</p>
              <div class="see cursor hbc vc notransition" :class="{can:see}" @click="hdlSee">
                <img src="img/login/see.png">
                <img src="img/login/see1.png">
                <i></i>
              </div>
            </div>
          </template>
          <p class="base-btn login" :class="allowClick?'cursor':'noTouch'" @click="login">
            登录
          </p>
          <div class="others">
            <p class="flex flex-align-items flex-justify-content">
              <i></i>
              <span>其他方式登录</span>
              <i></i>
            </p>
            <div class="list flex flex-between">
              <div class="item" v-for="item in ohters">
                <img :src="item.img">
              </div>
            </div>
          </div>
        </div>
        <div class="btm">
          <div class="agree flex flex-justify-content flex-align-items">
            <p class="circle cursor r50" @click="hdlAgree" :class="{active:agree}">
              <img src="img/common/gou1.png" class="hvc">
            </p>
            同意<a target="_blank" href="user-agreement.html">《用户协议》</a>和<a target="_blank" href="">《隐私条款》</a>
          </div>
          <p class="code-tip" v-if="formType == 'code'">未注册过的手机号，我们将自动帮您注册账号</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  
  module.exports = {
    data: function () {
      return {
        formType:'code',
        form:{
          userName:'',
          phone:'',
          password:'',
          passwordAgain:'py179hao',
          code:'',
        },
        codeUrl:'',
        appear:false,
        logOpt:[
          {name:'短信登录',val:'code',keyAry:['phone','code']},
          {name:'密码登录',val:'password',keyAry:['userName','password']},
          {name:'扫码登录',val:'scan',keyAry:['phone','code']},
        ],
        allowClick:false,
        verifyKey:['phone','code'],
        phoneRight:false,
        codeRight:false,
        userNameRight:false,
        passwordRight:false,
        phoneFocus:false,
        codeFocus:false,
        userNameFocus:false,
        passwordFocus:false,
        agree:false,
        ohters:[
          {img:'img/login/wechat.png'},
          {img:'img/login/qq.png'},
          {img:'img/login/weibo.png'},
          {img:'img/login/alipay.png'},
          {img:'img/login/baidu.png'},
        ],
        see:false,
      }
    },
    watch: {
      form:{
        handler(newValue, oldValue){
          let This = this;
          console.log(this.form);
          let matchItem = getSpecifyItem(this.logOpt,this.formType,'val');
          console.log(matchItem);
          this.allowClick = true;
          matchItem.keyAry.forEach(item => {
            This[item + 'Right'] = false;
            if(item == 'phone'){
              if(This.form[item].replace(/\s+/g,'').length == 11){
                This[item + 'Right'] = true;
              }else{
                This.allowClick = false;
              } 
            }
            if(item == 'code'){
              if(This.form[item].replace(/\s+/g,'').length){
                This[item + 'Right'] = true;
              }else{
                This.allowClick = false;
              } 
            }
          });
        },
        deep: true, // 深度监听，适用于嵌套对象
        immediate: true // 可选：组件初始化时立即执行一次
      }
    },
    methods:{
      hdlShow(){
        this.appear = !this.appear;
      },
      hdlWay(val){
        this.formType = val;
      },
      hdlClear(key){
        let obj = newObj(this.form);
        obj[key] = '';
        console.log(obj[key]);
        this.form = obj;
        this[key + 'Focus'] = false;
      },
      hdlFocus(key){
        let This = this;
        this.verifyKey.forEach(item => {
          This[item + 'Focus'] = false;
        });
        This[key + 'Focus'] = true;
      },
      hdlAgree(){
        this.agree = !this.agree;
      },
      hdlSee(){
        this.see = !this.see;
      },
      addNotice(msg,type){
        this.$emit('call-add-notice',msg,type);
      },
      getCode(){
        axios.get(dataUrl + '/captchaImage').then((res) => {
          // console.log(res.data);
          this.codeUrl = 'data:image/gif;base64,' + res.data.img;
          this.form.uuid = res.data.uuid;
          // console.log(this.form);
        })  
      },
      login(){
        console.log(1);
        if(!this.agree){
          this.$emit('call-add-notice','请阅读并同意《用户协议》和《隐私条款》','info');
        }else{
          this.appear = false;
          localStorage.setItem('token','zz');
          $('body').addClass('logged');
          this.$emit('call-token');
        }
        
        // return false;
        // axios.get(dataUrl + '/login',this.form).then((res) => {
        //   console.log(res.data);
          
        // })  
      },
      resetForm(){
        this.form = {
          nickName:'',
          email:'',
          password:'',
          passwordAgain:'',
          code:'',
          uuid:'',
          googleUserCode:''
        };
      },
      switchType(type){
        this.resetForm();
        this.formType = type;
      },
      checkForm(key,label){
        
        if(!this.form[key].replace(/\s+/g,'').length){
          console.log(this.form[key],label);
          this.addNotice('请输入' + label,'info');
          return false;
        }else{
          return true;
        }
      },
      register(){
        if(this.form.password != this.form.passwordAgain){
          this.addNotice('两次密码输入不一致','info');
          return false;
        }
        axios.post(dataUrl + '/novel/user/register',this.form).then((res) => {
          console.log(res.data);
          if(res.data.code != '200'){
            this.addNotice(res.data.msg,'info');
          }else{
            this.addNotice('注册成功','success');
            this.resetForm();
          }
        })
      }
    },
    created: function () {
      // this.getCode();
      
    }
  }
</script>
<style>
  .login-box{
    position: fixed;
    z-index: 10;
    background: #00000080;
    display: none;
  }
  .login-box.active{
    display: block;
  }
  .login-box .window{
    height: 508px;
    width: 718px;
    background: #1e2126;
    border-radius: 8px;
    overflow: hidden;
  }
  .login-box .window .pic{
    width: 45%;
    position: relative;
  }
  .login-box .window .txt{
    bottom: 20%;
    text-align: center;
    white-space: nowrap;
    color: #ffffffe6;
  }
  .login-box .window .txt p:first-child{
    
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 12px;
  }
  .login-box .window .txt span{
    padding: 0 8px;
    font-size: 16px;
    
  }
  .login-box .window .txt p i{
    height: 2px;
    width: 60px;
    background: linear-gradient(90deg,#ffffff24,#fff0)!important;
  }
  .login-box .window .rht{
    position: relative;
    flex: 1;
  }
  .login-box .window .rht>.close{
    color: #ffffffbf;
    font-size: 28px;
    padding: 3px;
    position: absolute;
    right: 14px;
    top: 2px;
  }
  .login-box .window .rht .way{
    margin: 70px auto 0;
    width: 280px;
    line-height: 1;
    font-size: 14px;
    color: #ffffff7f;
  }
  .login-box .window .rht .way p:last-child{
    opacity: 0;
    pointer-events: none;
  }
  .login-box .window .rht .way p.active{
    color: #fff;
    position: relative;
  }
  .login-box .window .rht .way p.active::after{
    content: '';
    background: #03b74d;
    border-radius: 2px;
    bottom: -10px;
    box-shadow: 0 -6px 14px 1px #03b74d;
    height: 2px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    width: 12px;
  }
  .login-box .window .rht .form{
    margin: 35px auto 0;
    width: 280px;
    
  }
  .login-box .window .rht .form .inp{
    position: relative;
  }
  .login-box .window .rht .form .inp .close{
    color: #ffffff4c;
    display: none;
    font-size: 24px;
    right: 15px;
  }
  .login-box .window .rht .form .inp .close:hover{
    color: #03b74d;
  }
  
  
  
  .login-box .window .rht .form input{
    height: 48px;
    padding-left: 15px;
    padding-right: 38px;
    border: 1px solid #ffffff14;
    color: #fff;
    border-radius: 6px;
    font-size: 13px;
     caret-color: #00cc4c;
  }
  .login-box .window .rht .form .inp + .inp{
    margin-top: 14px;
  }
  .login-box .window .rht .form input::placeholder{
    color: #757575;
  }
  .login-box .window .rht .form .inp:hover input,
  .login-box .window .rht .form input:focus,
  .login-box .window .rht .form .inp.active input{
    background: #00da5a0a;
    border-color: #00da5a4c;
  }
  .login-box .window .rht .form .inp.inputted.focus .close{
    display: block;
  }
  .login-box .window .rht .form .code input{
    flex: 1;
    padding-right: 140px;
  }
  .login-box .window .rht .form .code .close{
    right: 110px;
  }
  .login-box .window .rht .form .code .btn{
    color: #03b74d;
    font-size: 13px;
    cursor: pointer;
    right: 15px;
  }
  .login-box .window .rht .form .code .btn:hover{
    color: #03b74dcf;
  }
  .login-box .window .rht .form .password input{
    padding-right: 70px;
  }
  .login-box .window .rht .form .password .close{
    right: 45px;
  }
  .login-box .window .rht .form .see{
    width: 18px;
    right: 15px;
    opacity: .3;
  }
  .login-box .window .rht .form .see:hover{
    opacity: 1;
  }
  .login-box .window .rht .login{
    line-height: 40px;
    text-align: center;
    color: #fff;
    font-size: 14px;
    border-radius: 40px;
    margin: 36px 0 26px;
  }
  .login-box .window .rht .login.noTouch{
    opacity: .3;
  }
  .login-box .window .rht .form .see i{
    width: 100%;
    height: 1px;
    position: absolute;
    background-color: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) rotate(45deg);
  }
  .login-box .window .rht .form .see:hover i{
    background: #03b74d;
  }
  .login-box .window .rht .form .see:hover{

  }
  .login-box .window .rht .form .see.can i{
    display: none;
  }
  .login-box .window .rht .others i{
    background-color: #ffffff0c;
    height: 1px;
    width: 89px;
  }
  .login-box .window .rht .others span{
      color: #ffffff4c;
      font-size: 12px;
      margin: 0 12px;
  }
  .login-box .window .rht .others .list{
    margin-top: 16px;
  }
  .login-box .window .rht .others .item{
    width: 36px;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    background: #ffffff0a;
  }
  .login-box .window .rht .others .item:hover{
    background-color: #ffffff14;
  }
  .login-box .window .rht .btm{
    border-top: #ffffff0a 1px solid;
    left: 8px;
    position: absolute;
    right: 8px;
    width: auto;
    bottom: 0px;
    padding: 21px 0 18px;
    text-align: center;
    color: #ffffff4c;
    font-size: 13px;
  }
  .login-box .window .rht .btm .agree{
    color: #ffffff7f;
    font-size: 12px;
    
  }
  .login-box .window .rht .btm .code-tip{
    margin-top: 5px;
  }
  .login-box .window .rht .btm .agree .circle{
    width: 16px;
    height: 16px;
    position: relative;
    border: #ffffff7f 1px solid;
    margin-right: 8px;
  }
  .login-box .window .rht .btm .agree .circle.active{
    border-color: #03b74d;
    background: #03b74d;
  }
  .login-box .window .rht .btm .agree .circle img{
    width: 75%;
  }
  .login-box .window .rht .btm .agree a{
    color: #03b74d;
  }
  .login-box .window .rht .btm .agree a:hover{
    color: #1cc749;
  }
  
  
  
  
  
  

  @media(max-width: 1600px){
   
  }
  
  
  
  @media(max-width: 1023px){
    .login-box .window .rht>.close{
      font-size: 24px;
      right: 10px;
    }
    .login-box .window{
      height: 428px;
      width: 600px;
    }
    .login-box .window .txt p:first-child{
      font-size: 22px;
      margin-bottom: 9px;
    }
    .login-box .window .txt span{
      font-size: 14px;
    }
    .login-box .window .txt p i{
      width: 40px;
    }
    .login-box .window .rht .way{
      margin-top: 45px;
    }
    .login-box .window .rht .way p.active::after{
      bottom: -7px;
    }
    .login-box .window .rht .form{
      margin-top: 27px;
    }
    .login-box .window .rht .form input{
      height: 42px;
    }
    .login-box .window .rht .login{
      line-height: 35px;
      margin: 26px 0 18px;
    }
    .login-box .window .rht .others .item{
      width: 32px;
    }
    .login-box .window .rht .btm{
      padding: 16px 0 12px;
    }
    .login-box .window .rht .btm .agree .circle{
      width: 14px;
      height: 14px;
      margin-right: 6px;
    }
    
    
  }
  @media(max-width: 767px){
    .login-box .window .pic{
      display: none;
    }
    .login-box .window{
      width: 300px;
    }
    .login-box .window .rht .way,
    .login-box .window .rht .form{
      width: 250px;
    }
    .login-box .window .rht .others i{
      width: 60px;
    }
    .login-box .window .rht .btm {
        padding: 12px 0 8px;
    }
  }
</style>
